import React, { useState } from 'react'
import { Row, Col, Radio, InputNumber, Slider, Button, Checkbox, Input, Space, Popover, Dropdown, Tag, Tooltip, Switch, Divider } from 'antd'
import EditLink from '@/components/EditLink';
import UploadImage from '@/components/UploadImage';
import SelectRadioModel from '@/components/SelectRadioModel'
import UploadSelectImage from '../../../UploadSelectImage';
import { CloseOutlined } from '@ant-design/icons'
import { SketchPicker } from 'react-color';
import EditorForm from '@/components/EditorForm';
import './index.less'
const RichText = (props) => {
    const { selectData, data, edit } = props
    const { selectIndex } = data
    const { marginType, content, top, bottom, backgroundType, backgroundColor, paddingLeft, paddingTop, } = selectData
    const [visible, setVisible] = useState(false)
    const [editVisible, setEditVisible] = useState(false)
    const [shopEdit, setShopEdit] = useState(false)
    const [checkVisible, setCheckVisible] = useState(false)
    const [bgVisible, setBgVisible] = useState(false)

    const handleUpdate = (o) => {
        edit({
            list: data.list.map((val, index) => {
                if (index === selectIndex) {
                    return {
                        ...val,
                        ...o
                    }
                }
                return val
            })
        })
    }

    return <Row gutter={[12, 24]}>
        <Col className='editor-content-item-label'
            span={24}>
            富文本
        </Col>
        <Divider></Divider>
        <Col className='editor-content-item-label'
            span={24}>
            内容
        </Col>
        <Col span={24}>
            <EditorForm
                editClass='RichText_edit_box'
                content={content}
                editCallback={(val) => handleUpdate({ content: val })}
            ></EditorForm>
        </Col>
        <Col className='editor-content-item-label'
            span={24}>
            组件样式
        </Col>
        <Col
            span={24}>
            <Row gutter={[12, 12]}>
                <Col span={6}>左右内边距</Col>
                <Col span={12}>
                    <Slider
                        min={0}
                        max={32}
                        onChange={(e) => handleUpdate({ paddingLeft: e })}
                        value={paddingLeft}
                    />
                </Col>
                <Col span={6}><InputNumber min={0}
                    max={32} onChange={(e) => {
                        handleUpdate({ paddingLeft: e })
                    }} value={paddingLeft}></InputNumber></Col>
            </Row>
        </Col>
        <Col
            span={24}>
            <Row gutter={[12, 12]}>
                <Col span={6}>上下内边距</Col>
                <Col span={12}>
                    <Slider
                        min={0}
                        max={32}
                        onChange={(e) => handleUpdate({ paddingTop: e })}
                        value={paddingTop}
                    />
                </Col>
                <Col span={6}><InputNumber min={0}
                    max={32} onChange={(e) => {
                        handleUpdate({ paddingTop: e })
                    }} value={paddingTop}></InputNumber></Col>
            </Row>
        </Col>
        <Col className='editor-content-item-label'
            span={24}>
            外边距：
            <Radio.Group onChange={(e) => {
                handleUpdate({
                    top: 12,
                    bottom: 0,
                    marginType: e.target.value
                })
            }} value={marginType}>
                <Radio value={'detault'}>默认</Radio>
                <Radio value={'customize'}>自定义</Radio>
            </Radio.Group>
        </Col>
        {marginType === 'customize' && <Col
            span={24}>
            <Row gutter={[12, 12]}>
                <Col span={6}>上</Col>
                <Col span={12}>
                    <Slider
                        min={0}
                        max={32}
                        onChange={(e) => handleUpdate({ top: e })}
                        value={top}
                    />
                </Col>
                <Col span={6}><InputNumber min={0}
                    max={32} onChange={(e) => {
                        handleUpdate({ top: e })
                    }} value={top}></InputNumber></Col>
            </Row>
            <Row gutter={[12, 12]}>
                <Col span={6}>下</Col>
                <Col span={12}>
                    <Slider
                        min={0}
                        max={32}
                        onChange={(e) => handleUpdate({ bottom: e })}
                        value={bottom}
                    />
                </Col>
                <Col span={6}><InputNumber min={0}
                    max={32} onChange={(e) => {
                        handleUpdate({ bottom: e })
                    }} value={bottom}></InputNumber></Col>
            </Row>
        </Col>}
        <Col className='editor-content-item-label'
            span={24}>
            组件背景
        </Col>
        <Col span={24}>
            <Radio.Group onChange={(e) => {
                handleUpdate({ backgroundType: e.target.value, backgroundColor:"#ffffff",backgroundImage: '' })
            }} value={backgroundType}>
                <Radio value={'default'}>默认</Radio>
                <Radio value={'color'}>颜色</Radio>
                <Radio value={'image'}>图片</Radio>
            </Radio.Group>
        </Col>
        {backgroundType === 'color' ? <Col span={24}>
            <div className='editor-set-color'>
                <div className='design-editor-content-item-label'>
                    自定义颜色
                </div>
                <div className='design-editor-link'>
                    <Space>
                        {/* <SketchPicker color={backgroundColor}
                            onChangeComplete={(e) => {
                                edit({
                                    backgroundColor: e
                                })

                            }}></SketchPicker> */}
                        <Button type='link'>重置</Button>
                        <Popover content={<SketchPicker
                            color={backgroundColor}
                            onChange={(e) => {
                                handleUpdate({
                                    backgroundColor: e.hex
                                })

                            }}></SketchPicker>} trigger={['click']} placement={'bottom'}>
                            <div className='design-color-set'>
                                <div style={{ background: backgroundColor }} className='design-color-block '></div>
                            </div>
                        </Popover>

                    </Space>
                </div>
            </div>
        </Col> : backgroundType === 'image' ? <Col span={24}>
            <div className='editor-set-color' onClick={(e) => {
                setBgVisible({
                    show: true,
                })
            }}>
                {backgroundImage ? <div style={backgroundObj(backgroundImage)} className='editor-set-uploadBlock'>
                </div> : <div className='editor-set-uploadBlock'>
                    <div className='editor-set-upload'>
                        <i className='icon-jia'></i>
                    </div>
                </div>}
            </div>
        </Col> : ""}
        <UploadImage handleImage={(e) => {
            if (e) {
                const { src } = e

                handleUpdate({
                    backgroundImage: src
                })
            }
        }} visible={bgVisible} onClose={() => { setBgVisible(false) }}></UploadImage>
    </Row>
}
export default RichText
